<template>
	<div>
		<el-card
			shadow="hover"
			v-if="commentData.length !== 0 && commentData !== null"
		>
			<template #header>
				<div style="display: flex; align-items: center">
					<div>
						<el-text size="large" style="font-weight: bold">
							评论
						</el-text>
					</div>
					<div
						v-if="commentData[0].state === 'none'"
						style="margin-left: 1vw"
					>
						<el-text size="large" style="font-weight: bold"
							>0</el-text
						>
					</div>
					<div v-else style="margin-left: 1vw">
						<el-text size="large" style="font-weight: bold">{{
							commentData.length
						}}</el-text>
					</div>
				</div>
			</template>
			<div style="width: 100%; min-height: 16vh">
				<div style="width: 100%; display: flex; flex-direction: column">
					<div
						v-if="userData"
						style="display: flex; align-items: center; width: 100%"
					>
						<div>
							<el-image
								:src="userData.avatar"
								fit="fill"
								style="
									height: 4vw;
									width: 4vw;
									border-radius: 50%;
								"
							></el-image>
						</div>
						<div style="width: 100%; margin-left: 1vw">
							<el-input
								v-model="commentContent"
								style="width: 100%; height: 8vh"
								type="text"
								placeholder="你渴望力量吗"
								@focus="commentInputFocus"
								@blur="commentInputBlur"
							/>
						</div>
					</div>
					<div v-else>
						<el-skeleton :rows="3" animated />
					</div>

					<div
						style="
							width: 100%;
							margin-top: 2vh;
							margin-left: 5vw;
							height: 6vh;
						"
					>
						<Transition
							enter-active-class="slideDownReturn"
							leave-active-class="vanishOut"
						>
							<el-button
								v-if="lowerSidebarIsShow"
								type="success"
								size="large"
								style="width: 90%"
								@click="postComments"
								>发送</el-button
							>
						</Transition>
					</div>

					<el-divider>
						<el-icon><ChatLineSquare /></el-icon>
					</el-divider>
					<div
						style="
							width: 100%;
							display: flex;
							justify-content: center;
						"
						v-if="commentData[0].state === 'none'"
					>
						快来发表第一条评论吧！
					</div>
					<div style="width: 100%" v-else>
						<el-row style="width: 100%">
							<el-col
								:span="24"
								ref="singleCommentTarget"
								v-for="(item, index) in commentData"
								:key="index"
							>
								<singleComment
									:commentData="commentData[index]"
									v-if="singleCommentTargetIsVisible"
								></singleComment>
								<el-divider
									v-if="index < commentData.length - 1"
								/>
							</el-col>
						</el-row>
					</div>
				</div>
			</div>
		</el-card>
		<el-card shadow="hover" v-else>
			<el-skeleton :rows="5" animated />
		</el-card>
	</div>
</template>

<script setup>
import { onBeforeMount, onMounted, toRefs, watch } from 'vue';
import axios from 'axios';
import { ChatLineSquare } from '@element-plus/icons-vue';

//异步组件引入
import { useIntersectionObserver } from '@vueuse/core';
const singleComment = defineAsyncComponent(() =>
	import('../components/singleComment.vue')
);
const singleCommentTarget = ref([]);
const singleCommentTargetIsVisible = ref(false);

useIntersectionObserver(singleCommentTarget, ([{ isIntersecting }]) => {
	if (isIntersecting) {
		singleCommentTargetIsVisible.value = isIntersecting;
	}
});

const props = defineProps({
	commentData: {
		default: [],
	},
	userData: {
		default: null,
	},
});

const emits = defineEmits(['POSTCOMMENTS']);

const { commentData, userData } = toRefs(props);
const username = localStorage.getItem('username');
const commentContent = ref('');
const lowerSidebarIsShow = ref(false);

const commentInputFocus = () => {
	lowerSidebarIsShow.value = true;
};
const commentInputBlur = () => {
	lowerSidebarIsShow.value = false;
};
const postComments = () => {
	const state = emits('POSTCOMMENTS', commentContent.value);
};

watch(lowerSidebarIsShow, () => {
	if (commentContent.value) {
		lowerSidebarIsShow.value = true;
	}
});
</script>

<style scoped>
@keyframes opacityChange {
	0% {
		opacity: 0;
	}
	25% {
		opacity: 0.25;
	}
	50% {
		opacity: 0.5;
	}
	75% {
		opacity: 0.75;
	}
	100% {
		opacity: 1;
	}
}
.slideDownReturn {
	animation-duration: 0.5s;
}
.vanishOut {
	animation-duration: 0.5s;
}
</style>
